<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js.txx.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
    <main class="c900 el-card" style="align-items: stretch;overflow: visible">
        <h2>租车记录</h2>
        <el-card style="width: 100%">
            <div class="flex" style="font-weight: bolder">
                <span>编号</span>
                <span>车辆照片</span>
                <span>品牌车型</span>
                <span>起止日期</span>
                <span style="text-align: center">金额</span>
                <span>状态</span>
                <span>操作</span>
            </div>
        </el-card>
        <el-card v-for="l in leases" style="width: 100%">
            <div class="flex">
                <span>{{l.id}}</span>
                <span><img :src="l.car.image" style="width: 120px;height: 90px"></span>
                <span>{{l.car.brand}}:{{l.car.model}}</span>
                <span>
                    {{l.days.split(/,/)[0]}}<br>~<br>
<!--                    计算最后一天有bug-->
                    {{l.days.substring(l.days.lastIndexOf(",")+1)}}</span>
                <span class="price">{{l.money}}元<small>元</small></span>
                <span>{{l.state}}</span>
                <span>
                    <a v-if="l.state=='支付'" @click="modState(l,'提车')" class="abtn">提车</a>
                    <a v-else-if="l.state=='提车'" @click="modState(l,'还车')" class="abtn">还车</a>
                    <a v-else class="abtn">评价</a>
                </span>
            </div>
        </el-card>
        <div style="text-align: right; margin-top: 20px">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
          leases : [],
        },
        created(){
            axios.get("MyLeasesServlet.s").then(res=>this.leases = res.data)
        },
        methods:{
            modState(lease,state){
                let url = state == '提车'?"OutServlet.s":"BackServlet.s";
                axios.get(url,{
                    params:{
                        id:lease.id,
                        cid:lease.car.id
                    }
                }).then(res=>{
                    if (res.data.code){
                        this.$message.success(res.data.msg);
                        lease.state = state;
                    }else {
                        this.$alert(res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
<style>

</style>
